<template>
  <div>
       <Header></Header>
       <div class="add">
        <h3>菜品详情</h3>
        <el-row :gutter="30">
            <el-col :span="10"
                ><div class="grid-content bg-purple">
                    <el-form :model="oneData" label-width="80px">
                        <el-form-item label="菜品编号">
                            <el-input v-model="oneData._id" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="菜品名称">
                            <el-input v-model="oneData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="免费观看">
                            <el-radio-group v-model="oneData.isFree">
                                <el-radio label="Y"></el-radio>
                                <el-radio label="N"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="热点商品">
                            <el-radio-group v-model="oneData.isHot">
                                <el-radio label="Y"></el-radio>
                                <el-radio label="N"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                       <el-form-item label="菜品时间">
                            <el-input v-model=" oneData.needtime"></el-input>
                        </el-form-item>
                         <el-form-item>
                            <el-button   type="primary" @click="onSubmit" >确认修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            
            <!-- <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess" >
                        <img v-if="oneData.coverpic" :src="oneData.coverpic" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </el-col> -->
        </el-row>
       </div>
    </div>
</template>

<script>
import Header from '../common/Header.vue'
import {createNamespacedHelpers} from 'vuex'
const{ mapState,mapActions} = createNamespacedHelpers('menus')
export default {
    components:{
        Header
    },
    data() {
        return {
            _id:'',
        }
    },
    created(){
        this._id= this.$route.params._id;
        this.getOneDataAsync({_id:this._id})
    },
     computed:{
        ...mapState(['oneData'])
    },
    methods: {
        ...mapActions(['getOneDataAsync','UpDataAsync']),
        //修改菜品
        async onSubmit(){
         const {data} = await this.UpDataAsync(this.oneData)
          if(data.meta.status == 200){
                this.$alert('数据修改成功！', '提示窗口', {
                     confirmButtonText: '确定',
                });
                this.$router.push('/menusList')
           } 
        }
        //图片显示
        // handleAvatarSuccess(res, file) {
        //     this.imageUrl = URL.createObjectURL(file.raw);
        // },
    },
}
</script>

<style scoped lang='scss'>
h3 {
    color: #999;
    margin: 20px 0;
}
.el-select{
    width: 435px;
}
.el-button {

    background-color: rgb(202, 219, 248);
    border-color: rgb(202, 219, 248);
    &:hover{
         background-color: rgb(202, 219, 248);
         border-color: rgb(202, 219, 248);
    }
}
.avatar-uploader, .el-upload {
    border: 2px dashed #409eff;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader ,.el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 200px;
    height: 100px;
    display: block;
}
</style>